<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
		<style>
		  .c1 {
				height: 50px;
				border: 1px  solid red;
				border-radius: 5px;
		    }
		  }
		</style>
	</head>
	<body>
		<div id="e1">
			<!--el-row表示一行-->
			<el-row>
			  <!--el-col表示列 span设置一列所占的分栏数量-->
			  <!--  elementUI把页面宽度分为24份儿， 各占12，则就是各占一半儿  -->
			  <el-col span="12"><div class="c1"></div></el-col>
			  <el-col span="12"><div class="c1"></div></el-col>
			</el-row><br/><br/>
			
			<!--gutter设置间距(每列的间距)-->
			<el-row gutter="20">
			  <el-col span="8"><div class="c1"></div></el-col>
			  <el-col span="8"><div class="c1"></div></el-col>
			  <el-col span="8"><div class="c1"></div></el-col>
			</el-row><br/><br/>
			
			<!--  0表示上下外边距是0， 左右外边距是auto(居中)  -->
			<!--  两等分并居中  -->
			<div style="width: 1200px; margin: 0  auto;">
				<el-row gutter="5">
				  <!--el-col表示列 span设置一列所占的分栏数量-->
				  <el-col span="12"><div class="c1"></div></el-col>
				  <el-col span="12"><div class="c1"></div></el-col>
				</el-row>
			</div><br/><br/>
			
			<!--  练习1：四等分并居中,间距30  -->
			<div style="width: 1200px; margin: 0  auto;">
				<!--gutter设置间距(每列的间距)-->
				<el-row gutter="30">
				  <el-col span="6"><div class="c1"></div></el-col>
				  <el-col span="6"><div class="c1"></div></el-col>
				  <el-col span="6"><div class="c1"></div></el-col>
				  <el-col span="6"><div class="c1"></div></el-col>
				</el-row>
			</div><br/><br/>
			
			<!--  练习2：三份 1:2:3并居中,间距10  -->
			<div style="width: 1200px; margin: 0  auto;">
				<!--gutter设置间距(每列的间距)-->
				<el-row gutter="10">
				  <el-col span="4"><div class="c1"></div></el-col>
				  <el-col span="8"><div class="c1"></div></el-col>
				  <el-col span="12"><div class="c1"></div></el-col>
				</el-row>
			</div><br/><br/>
			
			
			<h1>列偏移</h1>
			<el-row gutter="10">
				<!--offset设置偏移数量-->
				<!--  一列占20比例， 再往右偏移数量比例为2，则就会居中
				(20往右偏移2，相当于给左边预留2单位，列占用20，右边自然会剩余2)  -->
				<el-col span="20"  offset="2"><div class="c1"></div></el-col>
			</el-row>
		</div>
	</body>
	<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
	<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
	<script>
		let v=new Vue({
			el: '#e1',
			data: function(){
				return {
					
				}
			},
			methods: {
				
			}
		});
	</script>
</html>
